<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS3 3D卡片层叠动画DEMO演示</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <style>
    html,
    body {
      height: 100%;
      background-color: #272727;
    }

    html {
      font-size: 62.5%;
    }

    @media (max-width: 1000px) {
      html {
        font-size: 30% !important;
      }
    }

    .tariffCards {
      width: 100%;
      display: flex;
      user-select: none;
    }

    /* 光珊 */
    /* .tariffCards>div:after {
      position: absolute;
      top: -70px;
      left: 0;
      content: "";
      width: 200%;
      height: 200%;
      background-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 80%);
      transform: translateX(-100%);
    }
    .tariffCards>div:hover:after {
      transform: translateX(100%);
      transition: all 1.2s ease-in-out;
    } 
    */
    .tariffCards>div {
      position: relative;
      width: 48rem;
      height: 48rem;
      border-radius: 12px;
      transition: all 0.4s ease;
      overflow: hidden;
      cursor: pointer;
      margin-left: -238px;
      z-index: 3;
      box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #888888;
    }

    .tariffCards>div h3 {
      position: absolute;
      bottom: 28px;
      left: 15px;
      font-size: 18px;
      font-weight: 800;
    }

    .tariffCards>div span {
      position: absolute;
      font-weight: 700;
      bottom: 15px;
      left: 15px;
      font-size: 12px;
      font-weight: 600;
      opacity: 0.8;
    }

    .tariffCards>div:hover {
      transform: translate(30rem, 0px) scale(1.2);
    }

    .tariffCards>div:hover:nth-child(1) {
      transform: scale(1.2);
    }
  </style>
</head>

<body>

  <div class="tariffCards" style="position: absolute;left: 48rem;top: 200px;" id="app">
      <div v-for="(item, index) in imgs"  v-bind:style="classObjetc(item.url,index)" @click="change(index)">
        <h3>{{item.title}}</h3>
        <span>{{item.text}}</span>
      </div>
  </div>

</body>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!',
      imgs: [{
        url: 'img/img1.png',
        title: 'Hello World',
        text: '你好 世界'
      }, {
        url: 'img/img2.jpg',
        title: 'Hello World',
        text: '你好 世界'
      }, {
        url: 'img/img3.png',
        title: 'Hello World',
        text: '你好 世界'
      }, {
        url: 'img/img4.png',
        title: 'Hello World',
        text: '你好 世界'
      }],
      width:'48rem',
      height:'48rem'
    },
    methods: {
      change(index) {
        if(index != 0){
          return
        }
        if (this.width != '23rem') {
          this.width = '23rem',
          this.height = '23rem'
        } else {
          this.width = '48rem',
          this.height = '48rem'
        }
      },
      classObjetc(url,index){
        console.log(url)
        return {
        width: this.width,
        height: this.height,
        'border-radius': '12px',
        color: 'red',
        background: `url('${url}') no-repeat`,
        'z-index':this.imgs.length - index,
        'background-size': 'cover'
      }
      } 
    },
  })
</script>

</html>